<template>
    <div  class="grayBgColor"> 
        <div class="classifyContent">
            <div class="center mb20">
                <span class="fontSize14 colorOrange"> < {{parmInfo.brandName}} > </span> 
                <span class="fontbold fontSize16">
                    {{parmInfo.activeNav==3?`${parmInfo.year}年`:''}}
                    {{parmInfo.activeNav==2?`${parmInfo.year}-${parmInfo.month}`:''}}
                    {{parmInfo.activeNav==1?`${parmInfo.day}`:''}}
                   渠道汇总表</span>
            </div>
            <div class="flex flexAround samePeriodNav"  v-if="parmInfo.activeNav>1">
                <div :class="{'blueBorder colorBlue':contemporeType==1,'grayBorder':contemporeType==2}" @click="goContempore(1)">同期</div>
                <div :class="{'blueBorder colorBlue':contemporeType==2,'grayBorder':contemporeType==1}" @click="goContempore(2)">同店同期</div>
            </div>
            <div v-for="(item,index) in list" :key="index" class="w50 disInline center whiteBg classifyList" @click="goCheck(item)">
                <div class="colorBlue fontbold fontSize16 mb10">{{item.name}}</div>
                <div class="fontSize16 fontbold">{{contemporeType==1?item.num:item.shopNum}}</div>
                <div class="fontSize12 color333" v-show="contemporeType==1" :class="{'colorGreen':item.ratio<0,'colorRed':item.ratio>0}">
                    <span >{{item.ratio?`${item.ratio}%`:'-'}}</span> 
                    <van-icon v-if="item.ratio>0 || item.ratio<0" name="down"  :class="{'rotate180':item.ratio>0}"/>

                </div>
                <div class="fontSize12 color333" v-show="contemporeType==2" :class="{'colorGreen':item.shopRatio<0,'colorRed':item.shopRatio>0}">
                    <span >{{item.shopRatio?`${item.shopRatio}%`:'-'}}</span> 
                    <van-icon v-if="item.shopRatio>0 || item.shopRatio<0" name="down"  :class="{'rotate180':item.shopRatio>0}"/>
                </div>
            </div>
            <div class="right color999 fontSize11 mt10">*销售额单位：万</div>
            <!-- <div class="right color999 fontSize11 mt10">*列表展示销售额(万)与月累同期提升比</div>   {{parmInfo.activeNav==3?`${parmInfo.year}年`:`${parmInfo.day}`}}-->
        </div>
        <!-- <div class='listSty'>
            <div class="flex">
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">名称</div>
                <div class="w25 center fontSize12 tableTitleBgcolor  colorfff">销售额(万)</div>
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">同期提升比</div>
                <div class="w25 center fontSize12 tableTitleBgcolor colorfff">同期同店提升比</div>
            </div>
            <div class="content">
                <div v-for="(item,index) in list" :key="index" class="flex list">
                    <div class="w25 center whiteBg">{{item.channelName}}</div>
                    <div class="w25 center whiteBg">{{item.thisMonthSales}}</div>
                    <div class="w25 center whiteBg">{{item.thisMonthLiftRateText}}</div>
                    <div class="w25 center whiteBg">15%</div>
                </div>
            </div>
            
        </div> -->
    </div>
</template>
<script>
import { Toast} from 'vant'
export default{
    data(){
        return{
            list:[],
            // brandName:'',
            // brandId:'',
            // nowDate:'',
            parmInfo:{},
            contemporeType:1
        }
    },
    created(){
        let parm=this.$route.query
        console.log('parm',parm)
        // this.nowDate=parm.date
        // this.brandName=parm.brandName
        // this.brandId=parm.id
        this.parmInfo=parm
        if(this.parmInfo.activeNav > 1){
            this.contemporeType=this.parmInfo.contemporeType
        }
        this.getData()
    },
    methods:{
        getData(){
            Toast.loading({
                message: '加载中',
                forbidClick: true,
                duration:0
            })
            let obj={
                year:this.parmInfo.year,
                month:this.parmInfo.month,
                day:this.parmInfo.day,
                brandId:this.parmInfo.brandId,
            }
            console.log('参数',obj)
            this.$apiRequest.getChannelList(obj).then(res =>{
                console.log('这是什么',res)
                if(res.code==200){
                    // res.data.map(i=>{
                    //     i.thisMonthLiftRateText='-'
                    //     i.thisMonthLiftRate = '-'
                    // })
                    this.list=res.data
                    console.log('this.list',this.list)
                }
                Toast.clear()
            })
        },
        goCheck(info){
            console.log('infffffffff',info)
            let obj={
                brandId:this.parmInfo.brandId,
                channelId:info.channelId,
                year:this.parmInfo.year,
                month:this.parmInfo.month,
                day:this.parmInfo.day,
                brandName:this.parmInfo.brandName,
                activeNav:this.parmInfo.activeNav
            }
            this.$router.push({name:'areaReport',query:obj})
            // this.parmInfo.channelId=info.channelId
            // let url=''
            // this.parmInfo.activeNav==1?url='dailySalesWarehouse':url='monthSalesWarehouse'
            // this.$router.push({name:url,query:this.parmInfo})
        },
        goContempore(type){
            this.contemporeType=type
        },
    }
}
</script>
<style lang="less" scoped>
.w50{width: 50%}
.grayBgColor{
    background-color:#f1f1f1;
}
.classifyContent{
    width: 90%;
    margin: 0 auto;
    padding: 0.6rem 0;
    .classifyList{
        // width: 90%;
        padding: 0.24rem 0;
        margin: 0 auto;
        border-bottom: 1px #f1f1f1 solid;
        border-right: 1px #f1f1f1 solid;
    }
    .samePeriodNav{
        width: 60%;
        margin: 0 auto 0.4rem auto;
    }
}
.rotate180{transform: rotate(180deg);}
.w25{
    width: 25%;
    padding: 0.1rem 0;
}
// .listSty{
//     width: 90%;
//     margin: 0 auto;
//     .content .list:nth-child(2n){
//         background-color: #eef1f9 !important;
//     }
// }
.grayBorder{
    border-bottom: 1px #ddd solid;
    padding-bottom: 0.1rem;
}
.blueBorder{
    border-bottom: 1px #4873c1 solid;
    padding-bottom: 0.1rem;
}
</style>
